<template>
  <div class="stat-chart" v-loading.fullscreen.lock="loading">
    <div v-if="majorRateList!==null">
      <major-rate-chart :major-rates="majorRateList"></major-rate-chart>
    </div>
    <template v-if="goodsStat!==null">
      <div class="clearfix">
        <div style="width:60%">
          <goods-status-chart :goods-stat="goodsStat"></goods-status-chart>
        </div>
        <div style="width:40%">
          <goods-model-status-chart :goods-stat="goodsStat"></goods-model-status-chart>
        </div>
      </div>
      <div>
        <goods-model-price-chart :goods-stat="goodsStat"></goods-model-price-chart>
      </div>
      <div style="height:100%">
        <goods-price-area-chart :goods-stat="goodsStat"></goods-price-area-chart>
      </div>
    </template>
  </div>
</template>

<script>
  import StatisticApi from 'services/statisticApi';

  import MajorRateChart from './majorRateChart';
  import GoodsStatusChart from './goodsStatusChart';
  import GoodsModelStatusChart from './goodsModelStatusChart';
  import GoodsModelPriceChart from './goodsModelPriceChart';
  import GoodsPriceAreaChart from './goodsPriceAreaChart';

  export default {
    data() {
      return {
        loading: false,
        majorRateList: null,
        goodsStat: null
      };
    },

    mounted() {
      this.loading = true;
      Promise.all([
        this.setMajorRateData(),
        this.setGoodsStatData()
      ]).then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setMajorRateData() {
        return StatisticApi.getMajorTypeRateData().then(majorRateList => {
          this.majorRateList = majorRateList;
          return majorRateList;
        });
      },

      setGoodsStatData() {
        return StatisticApi.getGoodStatData().then().then(goodsStat=>{
          this.goodsStat = goodsStat;
          return goodsStat;
        });
      }
    },
    components: {
      MajorRateChart,
      GoodsStatusChart,
      GoodsModelStatusChart,
      GoodsModelPriceChart,
      GoodsPriceAreaChart
    }
  };

</script>

<style lang="scss" scoped>
  .stat-chart {
    padding: 10px 10px 5px;
    height: calc(100% - 15px);
    background: #f1f3f4;
    overflow: auto;
    min-width: 600px;

    >div {
      height: 50%;
      min-height: 200px;
    }

    .clearfix{
      >div{
        float: left;
        height: 100%;
      }
    }
  }

</style>
